<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example 01</title>

<!-- basic style -->
<link rel="stylesheet" href="style.css" type="text/css">

<!-- Tangle -->
<script type="text/javascript" src="../Tangle/Tangle.js"></script>

<!-- TangleKit (optional) -->
<link rel="stylesheet" href="../Tangle/TangleKit/TangleKit.css" type="text/css">
<script type="text/javascript" src="../Tangle/TangleKit/mootools.js"></script>
<script type="text/javascript" src="../Tangle/TangleKit/sprintf.js"></script>
<script type="text/javascript" src="../Tangle/TangleKit/BVTouchable.js"></script>
<script type="text/javascript" src="../Tangle/TangleKit/TangleKit.js"></script>

<!-- example -->
<script type="text/javascript">
function setUpTangle () {
    var element = document.getElementById("example");

    var tangle = new Tangle(element, {
        initialize: function () {
            this.tesla_count = 1;
            this.watt_per_tesla = 225;
        },
        update: function () {
            this.watt_total = this.tesla_count * this.watt_per_tesla;
        }
    });
}
</script>
</head>

<body onload="setUpTangle();">

<h1>Tangle: Example 01.</h1>

<h2>Dynamic Text 1.</h2>

<p id="example">
If your computer has <span data-var="tesla_count" class="TKAdjustableNumber"
data-min="1" data-max="100"> Tesla M2090</span>, you will consume
maximal <span data-var="watt_total"></span> Watts.
</p>

<p>
TDP (Thermal design power). see <a
href="http://www.nvidia.com/object/tesla_product_literature.html">
www.nvidia.com/object/tesla_product_literature</a> from NVidia.)
</p>

</body>
</html>
